<div id="NewDockerImage" class="OneContainer">
  <div class="col-md-12">
    <div class="Panel">
      <div class="PanelTitle">基于 DockerFile 创建镜像 (仅支持 Linux 系统)</div>
      <div class="PanelBody">
        <div class="row">
          <div class="col-md-12">
            <p>
              <a href="https://github.com/Suwings/MCSManager/blob/gh-pages/Question_1.md" style="color: #2f3ad6">如何让 Minecraft 服务端运行在 Docker 镜像中？</a>
              <a href="https://github.com/Suwings/MCSManager/blob/gh-pages/Question_2.md" style="color: #2f3ad6">如何在我的电脑上安装 Docker？</a>
            </p>
            <h4>DockerFile 文件</h4>
            <p>DockerFile 可以供你定制与参考，使用 DockerFile 来生成 Docker 镜像，随后使用镜像名与指定的服务端文件，就可以在 Docker 中开启 Minecraft 服务器。</p>
            <p style="color: red">必须使用 /mcsd 作为工作目录。Docker 镜像名就是您生成后的名字，请一定要记住！</p>
            <!-- <pre id="dockerfile" contenteditable="true" autocomplete="off"></pre> -->
            <textarea id="dockerfile" row="30" style="height: 220px; width: 100%" v-model="dockerFileText"> </textarea>
            <div class="input-group input-group-sm">
              <span class="input-group-addon" id="sizing-addon3">Docker 镜像名</span>
              <input
                type="text"
                autocomplete="off"
                class="form-control"
                placeholder="可填，默认 mcsd 镜像名，不建议更改，除非您要创建其他的镜像，请一定要记住名字"
                aria-describedby="sizing-addon3"
                v-model="dockerImageName"
              />
            </div>
            <p>
              <b>
                <span style="color: red">这需要联网下载文件构建，构建时间根据网络与处理器决定，大小约 700 MB，可能需要一段时间，可以关闭网页控制台，任务完成后，可以在结果列表按钮处查看结果。</span>
                <br />
                <br />
                <span>如果出现构建失败失败，请尝试检查 Docker 服务是否成功启动 (service docker start)，以及 docker 命令是否能执行，网络是否畅通。</span>
              </b>
            </p>
            <button v-bind:disabled="createDockerDis" class="btn btn-danger" v-on:click="createDocker()">创建 Docker 镜像</button>
            &nbsp;|&nbsp;
            <button class="btn btn-success" v-on:click="toCreateRes()">任务结果列表</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  MI.rListener("onload", function () {
    // 定义页面地址
    TOOLS.definePage("template/component/new_docker_image", "genuser/home", null);
    new Vue({
      el: "#NewDockerImage",
      data: {
        dockerFileText: 'FROM openjdk:8\nRUN mkdir -p /mcsd\nRUN echo "Asia/Shanghai" > /etc/timezone;dpkg-reconfigure -f noninteractive tzdata\nWORKDIR /mcsd',
        dockerImageName: "",
        createDockerDis: false
      },
      methods: {
        createDocker: function () {
          var obj = {
            dockerImageName: this.dockerImageName || "mcsd",
            dockerfile: TOOLS.decode(this.dockerFileText)
          };
          if (!confirm("DockerFile 文件：\n" + obj.dockerfile + "\n镜像名:" + obj.dockerImageName + "\n确认无误单击【确定】得以继续")) return;
          if (!TOOLS.isStdText(obj.dockerImageName)) {
            TOOLS.pushMsgWindow("镜像名字不合法！仅限字母数字下划线！");
            return;
          }
          this.createDockerDis = true;
          WS.sendMsg("docker/new", JSON.stringify(obj));
        },
        toCreateRes: function () {
          TOOLS.popWind({
            style: {
              maxWidth: "400px",
              top: "0px"
            },
            title: "Docker 构建结果",
            template: "template/dialog/docker_res.html",
            callback: function () {}
          });
        }
      }
    });
  });

  MI.rListener("onend", function () {});
</script>
